<template>
	<view class="wrap">
		<u-navbar :custom-back="back" title="周边商城">  
		</u-navbar>   
		<view class="gl-title"  >
			<!-- <view>
					<view class="page-body">
						<view class="page-section page-section-gap"> -->
							<!-- <map style="width: 100%; height: 330px;" :latitude="latitude" :longitude="longitude" :markers="markers" >
							</map> -->
							<map :scale='18' id="myMap"  style="width: 100%;height:300px;" 
							:markers="markers"  :longitude="longitude" :latitude="latitude" :circles="circles"></map>
					<!-- 	</view>
					</view> 
			</view> -->
		</view>
		<view class="gl-body"> 
			<scroll-view  :scroll-top="scrollTop" style="height: 420px" scroll-y="true">
			<!-- <u-row>
				<u-col :span="4" class="gl-img">
					<u-image width="170rpx" height="170rpx"  :src="src1" @error="imageError"></u-image> 
				</u-col>
				<u-col :span="5.8" @click="openPage('/pages/index/map/mall7')">
					<view class="gl-name">test</view>
					<view class="gl-descript">test</view>
					<view class="gl-price">test</view>
					<view class="gl-price">到这去</view>
				</u-col>
				<u-col :span="0.2" @click="godaohang">
					<u-image width="60px" height="60px"  :src="src" @error="imageError"  ></u-image> 
				</u-col>
			</u-row> -->
			<view>
	 		<u-row>
				<u-col :span="4" class="gl-img">
					<u-image width="170rpx" height="170rpx"  :src="src1" @error="imageError"></u-image> 
				</u-col>
				<u-col :span="5.8" @click="openPage('/pages/index/map/mall')">
					<view class="gl-name">古城步行街</view>
					<view class="gl-descript">杜甫江阁，给您不一样的城市风光</view>
					<view class="gl-price">6.7km</view>
				</u-col>
				<u-col :span="0.2" @click="godaohang">
					<u-image width="60px" height="60px"  :src="src" @error="imageError"  ></u-image> 
				</u-col>
			</u-row>
			</view>
			<view>
			<u-row>
				<u-col :span="4" class="gl-img">
					<u-image width="170rpx" height="170rpx"  :src="src2" @error="imageError"></u-image> 
				</u-col>
				<u-col :span="5.8" @click="openPage('/pages/index/map/mall1')">
					<view class="gl-name">超级文和友</view>
					<view class="gl-descript">儿时记忆，90年代经典还原</view>
					<view class="gl-price">3.2km</view>
				</u-col>
				<u-col :span="0.2" @click="godaohang1">
					<u-image width="60px" height="60px"  :src="src" @error="imageError"  ></u-image> 
				</u-col>
			</u-row>
			</view>
			<view>
			<u-row>
				<u-col :span="4" class="gl-img">
					<u-image width="170rpx" height="170rpx"  :src="src3" @error="imageError"></u-image> 
				</u-col>
				<u-col :span="5.8" @click="openPage('/pages/index/map/mall2')">
					<view class="gl-name">世界之窗</view>
					<view class="gl-descript">50多种大游乐设施，一票通玩</view>
					<view class="gl-price">3.5km</view>
				</u-col>
				<u-col :span="0.2" @click="godaohang2">
					<u-image width="60px" height="60px"  :src="src" @error="imageError" ></u-image> 
				</u-col>
			</u-row>
			</view>
			<view>
			<u-row>
				<u-col :span="4" class="gl-img">
					<u-image width="170rpx" height="170rpx"  :src="src4" @error="imageError"></u-image> 
				</u-col>
				<u-col :span="5.8" @click="openPage('/pages/index/map/mall3')">
					<view class="gl-name">万达国际商城</view>
					<view class="gl-descript">正品品质保障，为您提供品质的购物选择和便捷的服务体验</view>
					<view class="gl-price">4.5km</view>
				</u-col>
				<u-col :span="0.2" @click="godaohang3">
					<u-image width="60px" height="60px"  :src="src" @error="imageError"  ></u-image> 
				</u-col>
			</u-row>
			</view>
			<view>
			<u-row>
				<u-col :span="4" class="gl-img">
					<u-image width="170rpx" height="170rpx"  :src="src7" @error="imageError"></u-image> 
				</u-col>
				<u-col :span="5.8" @click="openPage('/pages/index/map/mall6')">
					<view class="gl-name">国金中心IFS</view>
					<view class="gl-descript">湖南省第一高楼，LEED铂金级绿色建筑认证</view>
					<view class="gl-price">10.7km</view>
				</u-col>
				<u-col :span="0.2" @click="godaohang4">
					<u-image width="60px" height="60px"  :src="src" @error="imageError"  ></u-image> 
				</u-col>
			</u-row>
			</view>
			<view>
			<u-row>
				<u-col :span="4" class="gl-img">
					<u-image width="170rpx" height="170rpx"  :src="src6" @error="imageError"></u-image> 
				</u-col>
				<u-col :span="5.8" @click="openPage('/pages/index/map/mall5')">
					<view class="gl-name">湖南省博物馆</view>
					<view class="gl-descript">首批国家一级博物馆，中央地方共建的八个国家级重点博物馆之一</view>
					<view class="gl-price">28.5km</view>
				</u-col>
				<u-col :span="0.2" @click="godaohang5">
					<u-image width="60px" height="60px"  :src="src" @error="imageError"  ></u-image> 
				</u-col>
			</u-row>
			</view>
			<view>
			<u-row>
				<u-col :span="4" class="gl-img">
					<u-image width="170rpx" height="170rpx"  :src="src5" @error="imageError"></u-image> 
				</u-col>
				<u-col :span="5.8" @click="openPage('/pages/index/map/mall4')">
					<view class="gl-name">凤凰古镇</view>
					<view class="gl-descript">古城历史悠久，民族风情浓郁，被称为“中国最美的小城”。</view>
					<view class="gl-price">100.2km</view>
				</u-col>
				<u-col :span="0.2" @click="godaohang6">
					<u-image width="60px" height="60px"  :src="src" @error="imageError"  ></u-image> 
				</u-col>
			</u-row>
			</view>
			</scroll-view>
		</view>              
	</view> 
</template>

<script>
	import Map from './map/openMap.js'
	export default {
		data() {
			return {
				test:true,
				checkList:[],
				favList: [],
				rightText: '管理',
				showEdit: false,
				delDisabled: false,
				checkedAll: false, 
				longitude: 116.323294,
				latitude: 39.893874,
				mapHeight: 600,
				addrArr: [],
				//标记点数组
				covers: [{
					latitude: 28.140401,
					longitude: 112.994162,
					iconPath: '../../../../static/img/ksh35.png'
				}, {
					latitude: 29.140401,
					longitude: 112.994162,
					iconPath: '../../static/img/ksh35.png'
				}],
				markers: [
				// 	{
				// 					title: '123',
				// 					longitude: 112.968882,
				// 					latitude: 28.184842,
				// 					iconPath: '../../static/img/ksh35.png'
				// },
								{
									title: '杜甫江阁',
									longitude: 112.968882,
									latitude: 28.184842,
									// iconPath: '../../static/img/ksh35.png'
								},
								{
									title: '超级文和友',
									latitude: 28.189663,
									longitude: 112.970033,
									// iconPath: '../../static/img/ksh35.png',
									// width:100,
									// height:100
								}, 
								{
									title: '世界之窗',
									latitude: 28.2365,
									longitude: 113.054893,
									// iconPath: '../../static/img/ksh35.png'
								},
								{
									title: '万达国际商城',
									latitude: 28.1987,
									longitude: 112.970946,
									// iconPath: '../../static/img/ksh35.png'
								},
								{
									title: 'IFS',
									latitude: 28.1925,
									longitude: 112.9785,
									// iconPath: '../../static/img/ksh35.png'
								},
								{
									title: '湖南省博物馆',
									latitude: 28.2119,
									longitude: 112.9935,
									// iconPath: '../../static/img/ksh35.png'
								},
								{
									title: '凤凰古镇',
									latitude: 27.949432,
									longitude: 109.603965,
									// iconPath: '../../static/img/ksh35.png'
								},
								{ 
									title: '北京西站',
									latitude: 39.915,
									longitude: 116.403998,
									// iconPath: '../../static/img/ksh35.png'
								},
								{
									title: '铁道学院',
									longitude: 112.9915,
									latitude: 28.13875,
									// iconPath: '../../static/img/ksh35.png'
								}
				],
				circles: [{ //在地图上显示圆
									longitude: 112.9915,
									latitude: 28.13875,
									fillColor: "#D9E6EF", //填充颜色
									color: "#A7B6CB", //描边的颜色
									radius: 50, //半径
									strokeWidth: 2 //描边的宽度
				} ],//圆
				// markers:[],//标记点数组 
				polylines: [],
				amapKey: 'f0c0c545b32941ed025097140c3b39af',
				location: {
					longitude: 112.9915,
					latitude: 28.13875,
					iconPath: '../../static/img/ksh35.png',
					address: '中南大学铁道学院'
				},
				src: require('../index/img/st.png'),
				src1: require('../index/img/1.png'), 
				src2: require('../index/img/8.png'),
				src3: require('../index/img/3.png'),
				src4: require('../index/img/4.png'),
				src5: require('../index/img/5.png'),
				src6: require('../index/img/6.png'),
				src7: require('../index/img/7.png'),
			}
		},
		onLoad() { 
			var that = this
			uni.getLocation({
				type: 'wgs84',
				success(res) {
					console.log(res, "当前位置");
					that.latitude = res.latitude
					that.longitude = res.longitude
					//标记点
					// that.markers = [{
					// 	id: 1,
					// 	latitude: res.latitude,
					// 	longitude: res.longitude,
					// 	iconPath: '../../../static/img/pos.png',
					// }]
					that.circles = [{ //在地图上显示圆
						latitude: res.latitude,
						longitude: res.longitude,
						fillColor: "#D9E6EF", //填充颜色
						color: "#A7B6CB", //描边的颜色
						radius: 50, //半径
						strokeWidth: 2 //描边的宽度
					}]
				}
			});
		},
		onReady: function(res) {
				this.mapContext = uni.createMapContext('my-map', this);
				//调用的函数放到onReady里面
				// this.getlocal();
				// this.test();
			},
		methods: {
			imageError: function(e) {
			            console.error('image发生error事件，携带值为' + e.detail.errMsg)
			        }, 
			formatPrice(price) {
				return (price / 100).toFixed(2);
			},
			back() {
				this.$u.route({
					type: 'navigateBack',
					delta: 1
				})
			},    
			openPage(url) {
				this.$u.route({
					url: url
				})
			},
			toHome() {
				this.$u.route({
					type: 'switchTab',
					url: '/pages/shop/index'
				});
			
			},
			godaohang() {
			 	this.location.name = this.location.address;
			 	let markers = JSON.parse(JSON.stringify(this.markers)); 
			 	console.log(markers)
			 	if(markers.length==0){
			 		uni.showToast({
			 			title:"所选择的地点信息不全，不能去导航"
			 		})
			 		return
			 	}
			 	var options = {
			 		origin: this.location,
			 		destination:markers[0], //导航终点点坐标和名称
			 		viaPoints:JSON.stringify({viaPoints:markers.slice(1, markers.length-1)}),
			 		mode: "drive", //导航方式 公交：bus驾车：drive（默认）,步行：walk,骑行：bike
			 		mapId: "map" //map 组件的 id (微信小程序端必传)
			 	}
			 	Map.routePlan(options,'gcj02')
			 	// Map.navigation(options, 'gcj02')
			 },
			 godaohang1() {
			 	this.location.name = this.location.address;
			 	let markers = JSON.parse(JSON.stringify(this.markers)); 
			 	console.log(markers)
			 	if(markers.length==0){
			 		uni.showToast({
			 			title:"所选择的地点信息不全，不能去导航"
			 		})
			 		return
			 	}
			 	var options = {
			 		origin: this.location,
			 		destination:markers[1], //导航终点点坐标和名称
			 		viaPoints:JSON.stringify({viaPoints:markers.slice(1, markers.length-1)}),
			 		mode: "drive", //导航方式 公交：bus驾车：drive（默认）,步行：walk,骑行：bike
			 		mapId: "map" //map 组件的 id (微信小程序端必传)
			 	}
			 	Map.routePlan(options,'gcj02')
			 	// Map.navigation(options, 'gcj02')
			 },
			 godaohang2() {
			 	this.location.name = this.location.address;
			 	let markers = JSON.parse(JSON.stringify(this.markers)); 
			 	console.log(markers)
			 	if(markers.length==0){
			 		uni.showToast({
			 			title:"所选择的地点信息不全，不能去导航"
			 		})
			 		return
			 	}
			 	var options = {
			 		origin: this.location,
			 		destination:markers[2], //导航终点点坐标和名称
			 		viaPoints:JSON.stringify({viaPoints:markers.slice(1, markers.length-1)}),
			 		mode: "drive", //导航方式 公交：bus驾车：drive（默认）,步行：walk,骑行：bike
			 		mapId: "map" //map 组件的 id (微信小程序端必传)
			 	}
			 	Map.routePlan(options,'gcj02')
			 	// Map.navigation(options, 'gcj02')
			 },
			 godaohang3() {
			 	this.location.name = this.location.address;
			 	let markers = JSON.parse(JSON.stringify(this.markers)); 
			 	console.log(markers)
			 	if(markers.length==0){
			 		uni.showToast({
			 			title:"所选择的地点信息不全，不能去导航"
			 		})
			 		return
			 	}
			 	var options = {
			 		origin: this.location,
			 		destination:markers[3], //导航终点点坐标和名称
			 		viaPoints:JSON.stringify({viaPoints:markers.slice(1, markers.length-1)}),
			 		mode: "drive", //导航方式 公交：bus驾车：drive（默认）,步行：walk,骑行：bike
			 		mapId: "map" //map 组件的 id (微信小程序端必传)
			 	}
			 	Map.routePlan(options,'gcj02')
			 	// Map.navigation(options, 'gcj02')
			 },
			 godaohang4() {
			 	this.location.name = this.location.address;
			 	let markers = JSON.parse(JSON.stringify(this.markers)); 
			 	console.log(markers)
			 	if(markers.length==0){
			 		uni.showToast({
			 			title:"所选择的地点信息不全，不能去导航"
			 		})
			 		return
			 	}
			 	var options = {
			 		origin: this.location,
			 		destination:markers[4], //导航终点点坐标和名称
			 		viaPoints:JSON.stringify({viaPoints:markers.slice(1, markers.length-1)}),
			 		mode: "drive", //导航方式 公交：bus驾车：drive（默认）,步行：walk,骑行：bike
			 		mapId: "map" //map 组件的 id (微信小程序端必传)
			 	}
			 	Map.routePlan(options,'gcj02')
			 	// Map.navigation(options, 'gcj02')
			 },
			 godaohang5() {
			 	this.location.name = this.location.address;
			 	let markers = JSON.parse(JSON.stringify(this.markers)); 
			 	console.log(markers)
			 	if(markers.length==0){
			 		uni.showToast({
			 			title:"所选择的地点信息不全，不能去导航"
			 		})
			 		return
			 	}
			 	var options = {
			 		origin: this.location,
			 		destination:markers[5], //导航终点点坐标和名称
			 		viaPoints:JSON.stringify({viaPoints:markers.slice(1, markers.length-1)}),
			 		mode: "drive", //导航方式 公交：bus驾车：drive（默认）,步行：walk,骑行：bike
			 		mapId: "map" //map 组件的 id (微信小程序端必传)
			 	}
			 	Map.routePlan(options,'gcj02')
			 	// Map.navigation(options, 'gcj02')
			 },
			 godaohang6() {
			 	this.location.name = this.location.address;
			 	let markers = JSON.parse(JSON.stringify(this.markers)); 
			 	console.log(markers)
			 	if(markers.length==0){
			 		uni.showToast({
			 			title:"所选择的地点信息不全，不能去导航"
			 		})
			 		return
			 	}
			 	var options = {
			 		origin: this.location,
			 		destination:markers[6], //导航终点点坐标和名称
			 		viaPoints:JSON.stringify({viaPoints:markers.slice(1, markers.length-1)}),
			 		mode: "drive", //导航方式 公交：bus驾车：drive（默认）,步行：walk,骑行：bike
			 		mapId: "map" //map 组件的 id (微信小程序端必传)
			 	}
				console.log(options)
			 	Map.routePlan(options,'gcj02')
			 	// Map.navigation(options, 'gcj02')
			 },
			 async initMarker(addrArr) {
			 	let arr = [];
			 	for (let i = 0; i < addrArr.length; i++) {
			 		arr.push(await Map.addressCoordinates(addrArr[i].label));
			 	} 
			 	for(let i = 0; i < arr.length; i++){
			 		arr[i].iconPath='/static/images/pos1.png'; 
			 	}
			 	let poliData = JSON.parse(JSON.stringify(arr)) 
			 	this.markers = poliData;
			 	console.log(this.markers) 
			 }, 
		}, 
		mounted() {
			uni.getLocation({
				type: 'gcj02', //gcj02\wgs84
				geocode: true,
				success: (res) => {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					//标记点
						// this.markers = [{
						// 	id: 1,
						// 	latitude: res.latitude,
						// 	longitude: res.longitude,
						// 	iconPath: '../../../static/img/pos.png',
						// }] ;
						this.circles = [{ //在地图上显示圆
										latitude: res.latitude,
										longitude: res.longitude,
										fillColor: "#D9E6EF", //填充颜色
										color: "#A7B6CB", //描边的颜色
										radius: 50, //半径
										strokeWidth: 2 //描边的宽度
									}] ;
					let addr = res.address;
					this.location.address = addr.country + addr.province + addr.city + addr.district + addr
						.street +
						addr.streetNum + addr.poiName + addr.cityCode;
					this.location.longitude = res.longitude;
					this.location.latitude = res.latitude;
					this.initMarker(this.addrArr);
				}
			});
			uni.getSystemInfo({
				success: (res) => { // res - 各种参数
					let info = uni.createSelectorQuery().select(".map_bottom");
					info.boundingClientRect((data) => { //data - 各种参数
						// this.mapHeight = (res.windowHeight - uni.upx2px(data.height) - 20) + 'px'
					}).exec()
				}
			});
		},
		
	}
</script>


<style lang="scss" scoped>
	.wrap {
		padding: 0rpx 30rpx;
	}

	.gl-body {
		padding-bottom: 80rpx;
	}

	.gl-title {
		padding: 20rpx;
		// position:sticky;
		// top:20px; 
	}

	.gl-img {
		padding: 30rpx;
	}

	.gl-name {
		font-size: 26rpx;
	}

	.gl-descript {
		font-size: 20rpx;
	}

	.gl-price {
		font-size: 24rpx;
		color: #FA3534;
	}

	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}

	.link-text {
		font-size: 28rpx;
	}
  
	.navigation {
		width: 100%;
		display: flex;
		position: fixed;
		bottom: 0;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
		justify-content: space-between;

		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 8rpx;


			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			margin-right: 60rpx;

		}
	}
	.no-data {
		padding: 0rpx 30rpx;
		margin-top: 50%;
	
		.content {
			text-align: center;
			color: lightgray;
			margin-bottom: 30rpx;
		}
	}
	
	// mapo
	
</style>
